<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title></title>
    <link rel="stylesheet" href="css/reset.css"/>
    <link rel="stylesheet" href="css/animate.css"/>
    <link rel="stylesheet" href="css/delay.css"/>
    <link rel="stylesheet" href="css/style.css"/>
    <script src="js/zepto.min.v1.1.6.js"></script>
    <script src="js/hammer.v2.0.8.js"></script>
    <style>


    </style>
</head>
<body>
<div id="startBox"  style="display: block;">
    <div id="qianm" class="youxi">
        <div class="header">
            <div class="tuzi">
                <img class="animated pulse infinite" src="img/bb.png" alt=""/>
            </div>
        </div>
        <div class="biaoti2 animated bounceInDown">
            <img src="img/bg1.png" alt=""/>
            <div class="dzzz">颜色大作战</div>
        </div>

        <div class="kaishi2 animated fadeIn delay15">
            <img src="img/aa.png" alt=""/>
            <div id="ksks" class="kaishiz">开始游戏</div>
        </div>

    </div>
</div>
<div id="loginBox"  style="display: none;">
    <div class="bs-example" data-example-id="hoverable-table">
        <table class="table table-hover">
            <thead>
            <tr>
                <th>排名</th>
                <th>玩家</th>
                <th>分数</th>
                <th>时间</th>
            </tr>
            </thead>
            <tbody  class="list-show">

            </tbody>
        </table>
    </div>
</div>
<div id="gameBox" >
    <canvas id="mycanvas"></canvas>
    <div class="gamebox" style="left: 0%;background-color: #97d1fa;"></div>
    <div class="gamebox" style="left: 33.3%;background-color: #9dfa9f;"></div>
    <div class="gamebox" style="left: 66.6%;background-color: #bc77fa;"></div>
    <div class="alertbox  animated bounceIn delay05">游戏结束</div>
    <div class="alertbox2 animated bounceIn delay05">恭喜通关</div>
    <div  class="usernum">分数：<span>0</span></div>
</div>
<div id="inputBox" >
    <div class="inputBoxlist">
        <input type="text"/>
        <button  id="loginAjax">确定</button>
    </div>

</div>
<audio  id="aud">
    <source src="audio/4004.mp3" type="audio/mp3"/>
</audio>
<audio  id="3d" autoplay loop>
    <source src="audio/1.mp3" type="audio/mp3"/>
</audio>


<script>
//    localStorage.clear();
    $(function() {

//        操作平台判断
//        if(navigator.platform=="Win32"||navigator.platform=="Win64"){
//            location.href = "https://www.baidu.com";
//        }
        //拉动的屏蔽
        $("#gameBox")[0].addEventListener("touchstart", function () {
            event.preventDefault();
        });
        var Mycnavas = $("#mycanvas"),
                GameBox = $(".gamebox");
        var h = document.getElementById("gameBox").clientHeight,
                w = document.getElementById("gameBox").clientWidth;

        var hammerGamebox1 = new Hammer(GameBox.eq(0)[0]),
                hammerGamebox2 = new Hammer(GameBox.eq(1)[0]),
                hammerGamebox3 = new Hammer(GameBox.eq(2)[0]);
        var hammerkaishi = new Hammer($(".kaishi2")[0]);
        var hammerlogin = new Hammer($("#loginBox")[0]);
        var hammerbiaoti2 = new Hammer($(".biaoti2")[0]);
        var hammeralertbox = new Hammer($(".alertbox")[0]);
        var hammerloginAjax = new Hammer($("#loginAjax")[0]);
        //计算后的颜色数组
        var MycolorAry = [];
        var gameNum = false;
        var setIn;

        var usernum = 0;
        //颜色池
        var colorAry = ["rgb(250, 97, 149)", "rgb(188, 119, 250)", "rgb(158, 93, 46)", "rgb(21, 66, 105)", "rgb(251, 255, 53)", "rgb(180, 250, 46)", "rgb(39, 229, 180)", "rgb(110, 119, 120)"];


        Mycnavas[0].width = w;
        Mycnavas[0].height = h;

        var ctx = Mycnavas[0].getContext("2d");


        hammerkaishi.on("tap", function () {
            var num = localStorage.getItem("colorRunuser");
            if(num){
                $("#startBox").hide();
                $("#gameBox").show();
                gamestart(ctx);
            }else{
                $("#inputBox").show();
            }

        });

        hammerlogin.on("tap", function () {
            $("#loginBox").hide();
            $("#startBox").show();
        });

        //        重新开始游戏
        hammeralertbox.on("tap", function () {
            usernum = 0;
            $(".usernum>span").text(usernum);
            $(".alertbox").hide();
            gamestart(ctx);
        })

        hammerbiaoti2.on("tap", function () {
            $("#startBox").hide();
            $("#loginBox").show();


            $.ajax({
                type:"post",
                url:"/gamelist",
                data:{},
                success:function(dt){
                    console.log(dt);
                    var html="";
                    for(var i = 0; i<dt.length; i++){
                        html+="<tr> <th scope='row'>"+(i+1)+"</th> " +
                                "<td>"+dt[i].user+"</td> <td>"+dt[i].num+"</td>" +
                                " <td>"+dt[i].day+"</td> </tr>";
                    }
                    $(".list-show").html(html);
                }
            })
        });

//        hammeralertbox.on("tap", function () {
////    `   alert(location.href);
//            location.href = location.origin+"/index2.html";
//        })

        hammerloginAjax.on("tap", function () {
            var user = $('.inputBoxlist > input[type="text"]').val();
            console.log(user);
            if (user == '' || user == null || user == undefined) {
                return false;
            }
            var name = localStorage.getItem("colorRunuser");
            if (name) {
                $("#inputBox").hide();
            }else{
                $.ajax({
                    type:"get",
                    url:"/gamelogin",
                    data:{
                        user:user
                    },
                    success:function(dt){
                        if(dt.node==1){
                            localStorage.setItem("colorRunuser",dt.user[0].user);
                            $("#inputBox").hide();
                        }
                    }
                })
            }


        })


        //----------- function -----------

        hammerGamebox1.on("tap", function () {
         document.getElementById("aud").play();
            var color1 = $(hammerGamebox1.element).css("backgroundColor");
            console.log(color1);
            console.log(MycolorAry[3]);
            if (color1 == MycolorAry[3]) {
                gameNum = true;
            } else {
                gameOver();

            }
        });
        hammerGamebox2.on("tap", function () {
            document.getElementById("aud").play();
            var color1 = $(hammerGamebox2.element).css("backgroundColor");
            console.log(color1);
            console.log(MycolorAry[3]);
            if (color1 == MycolorAry[3]) {
                gameNum = true;
            } else {
                gameOver();
            }
        });
        hammerGamebox3.on("tap", function () {
            document.getElementById("aud").play();
            var color1 = $(hammerGamebox3.element).css("backgroundColor");
            console.log(color1);
            console.log(MycolorAry[3]);
            if (color1 == MycolorAry[3]) {
                gameNum = true;
            } else {
                gameOver();
            }
        });

        function gameOver(){
            gameNum = false;
            console.log("选择错误,游戏结束！");
            clearInterval(setIn);
            $(".alertbox").show();
            var user = localStorage.getItem("colorRunuser");
            $.ajax({
                type:"post",
                url:"/gamenum",
                data:{
                    user:user,
                    num:usernum
                },
                success:function(dt){
                    console.log(dt);
                }
            })
        }

        function gamestart(canvasdom) {
            var num = -80;
            var gameTime = 200;
            var changenum = 0;


            randomColor();

            function setfun() {
                console.log("@@@")
                canvasdom.fillStyle = MycolorAry[3];
                setIn = setInterval(function () {
                    canvasdom.clearRect(0, 0, w, h);
                    canvasdom.fillRect(w / 2 - 40, num, 80, 80);
                    num += (20 + changenum);
                    //盒子超出了最底部的情况
                    if (num > h) {
                        gameOver();
                    /*    console.log("游戏结束！");
                        $(".alertbox").show();
                        clearInterval(setIn);*/

                    } else {
                        console.log(gameNum);
                        if (gameNum) {
                            gameNum = false;
                            randomColor();
                            clearInterval(setIn);
                            changenum += 5;
                            gameTime -= 5;
                            console.log(gameTime)
                            num = -80;
                            usernum += 10;
                            $(".usernum>span").text(usernum);

                            setfun();

                            console.log(colorAry);
                        } else {
                            console.log("hheheh")
                        }

                    }


                    if (gameTime < 0 || changenum > 200) {
                        console.log("恭喜通关");
                        $(".alertbox2").show();
                    }
                }, gameTime);
            }

            setfun();
        }

        function randomColor() {
            //难点 这里需要使用 concat创建一个新的数组 赋值给 cloary
            //目的 是 让每一次的 clonary 都是新的  不能影响 colorAry 的 颜色池！！！！
            var clonary = colorAry.concat();
            for (var i = 0; i < 3; i++) {
                var rad = Math.floor(Math.random() * (clonary.length));
                MycolorAry[i] = clonary[rad];
                clonary.splice(rad, 1);

            }

            var rad2 = Math.floor(Math.random() * 3);
            MycolorAry[3] = MycolorAry[rad2];

            GameBox.eq(0).css({"background-color": MycolorAry[2]});
            GameBox[0].style.backgroundColor = MycolorAry[2]
            GameBox.eq(1).css({"background-color": MycolorAry[1]});
            GameBox.eq(2).css({"background-color":MycolorAry[0]});
        }



    });
</script>
</body>
</html>